<template>
	<view>
		<view class="header flexCss-b">
			<view class="header-img"><image :src="detail.img" mode=""></image></view>
			<view class="header-title">{{detail.label}}</view>
		</view>
		
		<view class="composite flexCss-b">
			<view class="left">综合评分</view>
			<view class="right"><uni-rate size="25" @change="onChange" :value="pf" /></view>
		</view>

		<view class="textarea"><textarea maxlength="50" v-model="value" placeholder-style="color:#999" placeholder="请留下宝贵的意见吧~ " /></view>
		<view class="upImg">
			<view class="list">
				<view class="upImg-img" @click="upSuccess"><image src="../../static/上传图片 (1).png" mode=""></image></view>
				<view class="item" v-for="item in imgList" :key="item"><image :src="item" mode=""></image></view>
			</view>
		</view>
		
		<view class="button">
			<van-button type="danger" block @click="renderComment">提交评论</van-button>
		</view>
	</view>
</template>

<script setup>
// vue3小程序生命周期函数
import { onShareAppMessage, onLoad, onShow, onHide } from '@dcloudio/uni-app'
import { ApiShopDetail } from '@/api/modules/order.js'
import { reqGetAddComment } from '@/api/modules/comment .js'
import { reactive, toRefs } from 'vue'

const state = reactive({
	pf: '',
	value: '',
	imgs: '',
	imgList: [],
	id:'',
	detail: {},
	nid: ''
})

// 获取订单详情
const orderDetail = async () =>{
	const { data } = await ApiShopDetail(state.id)
	state.detail = data.data
	state.nid = data.data.nid
	console.log(data.data);	
}

// 提交评论
const renderComment = async () => {
	const sf = '杭师傅'
	const imgs = state.imgList.toString()
	const { data } = await reqGetAddComment({ imgs, value: state.value, pf: state.pf, sf, cid: state.nid })
	if(data.code === 200){
		uni.showToast({title:data.data, icon: 'none'})
		uni.navigateBack()
	}
	// uni.navigateBack()
	console.log(data);
}

const onChange = (e) => {
	state.pf = e.value
}

// 上传成功
const upSuccess = e => {
	const token = 'Bearer ' + uni.getStorageSync('TOKEN')
	uni.chooseImage({
		success(e) {
			const imgs = e.tempFilePaths
			 uni.uploadFile({
				url: 'http://192.168.137.206:4090/dish/dishs/addlogos',
				filePath: imgs[0],
				header: {
					Authorization: token
				},
				name: 'file',
				success: imgData => {
					let data =JSON.parse(imgData.data.replace('\uFEFF', ''))
					state.imgList.unshift(data.data)
					console.log(data.data);
				}
			})
		}
	})
}

// 页面加载
onLoad(message => {
	console.log(message);
	state.id = message.id
	orderDetail()
})

// 页面显示
onShow(() => {})

// 页面隐藏
onHide(() => {})

// 页面分享(不定义该函数 页面将无法分享)
onShareAppMessage(() => {})
const { zhpj, value, imageValue, imgList, detail, pf } = toRefs(state)
</script>

<style lang="scss">
page {
	padding: 0;
}
.header {
	margin-top: 20rpx;
	padding: 0 30rpx 10rpx 30rpx;
	border-bottom: 1px solid #f2f2f2;
	.header-img {
		image {
			width: 80rpx;
			height: 80rpx;
			border-radius: 6rpx;
		}
	}
	.header-title {
		margin-left: 20rpx;
	}
}
.composite {
	padding: 0 30rpx;
	height: 100rpx;
	border-bottom: 1px solid #f2f2f2;
	.right {
		margin-left: 20rpx;
	}
}
.textarea {
	width: 100%;
	height: 100rpx;
	padding: 30rpx;
	textarea {
		width: 94%;
		height: 100%;
	}
}
.upImg {
	display: flex;
	flex-wrap: wrap;
	.list {
		display: flex;
		flex-wrap: wrap;
		margin: 0 30rpx;
		.item {
			margin-bottom: 20rpx;
			margin-right: 20rpx;
			image {
				width: 150rpx;
				height: 150rpx;
			}
		}
	}
	.upImg-img {
		width: 150rpx;
		height: 150rpx;
		background-color: #f5f5f5;
		border: 1rpx dashed #ccc;
		margin-right: 20rpx;
		// font-size: 80rpx;
		// margin: 30rpx 30rpx;
		image {
			width: 100rpx;
			height: 100rpx;
			margin: 27rpx 27rpx;
		}
	}
}

.button{
	padding: 30rpx ;
	margin-top: 250rpx;
}
</style>
